@import "../common.scss";

html,body{
	height: 100%;
}

body {
	background:linear-gradient(#fff, #f7f7f7);
}

.mui-segmented-control.mui-scroll-wrapper {
    height: ws(380/2);
}

.mui-segmented-control.mui-scroll-wrapper .mui-scroll {
    height: ws(380/2);
    display: flex;
    align-items: center;
}

.content{
	.header{
		padding: 0 ws(15);
		padding-bottom: ws(15);
		padding-top: ws(30/2);
		color:  #414141;
		font-size: ws(50/2);  
	}
	.title{
		padding: 0 ws(15);
		padding-top: ws(10);
		font-size: ws(15);
		display: flex;
		align-items: center;
		color: darken($main-color,10%);
		.icon{
			width: ws(15);
			height: ws(15);
			margin-top: ws(2);
			margin-right: ws(1);
		}
	}
	.recommend{
		.img-wapper {
			display: flex;
			padding-left: ws(15);
			.item-item {
				width: ws(250);
				height: ws(320/2);
				overflow: hidden;
				position: relative;
				background-color: transparent;
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-right: ws(15);
				box-shadow: $shaow-bottom;
				border-radius:ws(10);
				.item-image {
					width: 100%;
					height: 100%;
					object-fit: cover;
				}
				.item-desc{
					position: absolute;
					top: 0;
					bottom: 0;
					left: 0;
					right: 0;
					display: flex;
					align-items: flex-end;
					background:linear-gradient(rgba(#fff,.4), rgba(#000,.3));
					.item-title{
						width: 100%;
						margin-bottom: ws(10);
						margin-left: ws(10);
						font-size: ws(15);
						color: #fff;
						font-weight: bold;
						text-align: left;
						@include one-line;
					}
				}
				.item-icon{
					position: absolute;
					z-index: -1;
					width: ws(25);
					height: ws(25);
					top: ws(15);
					left: ws(8);
					opacity: .7;
				}
			}
		}
	}
	.module{
		.module-list{
			margin-top: ws(15);
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			padding: 0 ws(15);
			.item{
				position: relative;
				overflow: hidden;
				display: flex;
				align-items: center;
				margin-bottom: ws(10);
				width: ws(335/2);
				height: ws(230/2);
				border-radius: ws(15);
				background-color: #fff;
				box-shadow: $shaow-bottom;
				.item-image{
					width: ws(335/2);
					margin-bottom: ws(30);
				}
				.item-title{
					position: absolute;
					left: 0;
					right: 0;
					margin: auto;
					bottom: ws(8);
					text-align: center;
					font-size: ws(26/2);
					letter-spacing: ws(3);
					color: $main-color;
				}
			}
		}
	}
}

